// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Fk
import Fk.Components.LunarLTK
import Fk.Pages.LunarLTK
import Fk.Components.Common
import Qt5Compat.GraphicalEffects

GraphicsBox {
  id: root

  property int talentHeight: 100 // 战法框高度，100大概能塞3行描述多一点
  property string prompt: ""
  ListModel {
    id: talents
  }

  title.text: Util.processPrompt(prompt)
  width: body.width + 20
  height: body.height + title.height + 20

  ListView {
    id: body
    x: 10
    y: title.height + 5
    width: 540
    height: Math.min(400, talentHeight * talents.count)

    clip: true
    spacing: 10

    model: talents

    delegate: Item { // 每个战法模块
      width: body.width
      height: talentHeight
      Rectangle { // 背景
        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        color: "#EEEEEE"
        opacity: .53
        radius: 5
      }

      Rectangle {// 战法信息，包括名称，派系，稀有度
        id : talentInfo
        anchors.top: parent.top
        width: parent.width
        height: 30

        color: "#c4c4c4"
        opacity: .8
        radius: 3

        Text { // 战法序号（放右上角）
          id: indexText
          text: "NO." + model.t_index.toString()
          color: "gray"
          font.pixelSize: 12

          anchors.right: parent.right
          anchors.top: parent.top
          anchors.rightMargin: 4
          anchors.topMargin: 3
        }

        RowLayout {
          spacing: 15

          Text { // 战法名称
            id: talentName
            text: "<b>" + Lua.tr(model.name) + "</b>"
            color: {
              if (model.rarity === 2) {
                return "#335CFF";
              } else if (model.rarity === 3) {
                return "#DA5BFA";
              } else if (model.rarity === 4) {
                return "#F87C2A";
              }
              return "white";
            }
            wrapMode: Text.NoWrap // 不换行
            elide: Text.ElideRight // 文本过长时显示省略号
            font.pixelSize: 18
            textFormat: TextEdit.RichText
          }

          Text { // 战法派系
            id: talentStyle
            text: model.style
            color: "white"
            font.pixelSize: 16
          }

          Image { // 战法图标
            id: talentPic
            fillMode: Image.PreserveAspectCrop
            source: SkinBank.getMarkPic("@!mark_" + model.name)
          }
        }
      }

      Flickable { // 战法描述
        id: talentDetail
        anchors.bottom: parent.bottom
        height: parent.height - talentInfo.height
        contentHeight: detail.height
        width: parent.width
        clip: true
        Text {
          id: detail
          width: parent.width
          text: Lua.tr(":" + model.name)
          color: "white"
          wrapMode: Text.WordWrap
          font.pixelSize: 16
          textFormat: TextEdit.RichText
        }
      }

      MouseArea { // 点击确认区域
        anchors.fill: parent
        onClicked: {
          close();
          roomScene.state = "notactive";
          ClientInstance.replyToServer("", model.name); // 返回选中数据
        }
      }
    }
  }

  function loadData(data) {
    data[0].map(t => {
      talents.append({
        name: t.name,
        rarity: t.rarity,
        style: t.style,
        t_index: t.t_index,
      });
    });
    prompt = data[1];
  }
}
